<template>
  <!-- 选择车辆 -->
  <div v-if="modalShow">
    <Modal ref="tablemodal" v-model="modalShow" :width="900" footer-hide>
      <p slot="header" style="text-align: center">
        <span>选择车辆</span>
      </p>
      <Row class="search_styl" :gutter="6" style="padding: 0px 0px 10px 0">
        <Col span="6">
        <Input v-model="searchparams.carNo" placeholder="请输入车牌号" @on-enter="handleSubmit('carNo')" />
        </Col>
        <Col span="6">
        <Input v-model="searchparams.name" placeholder="请输入司机姓名" @on-enter="handleSubmit('name')" />
        </Col>
        <Col span="6" class="ivu-text-right">
        <Select v-model="searchparams.inCommonUse" style="text-align: start;" placeholder="请选择是否常用">
          <Option :value="1">常用</Option>
          <Option :value="0">不常用</Option>
        </Select>
        </Col>
        <Col span="6">
        <Button style="margin: 0 10px" type="primary" @click="handleSubmit('search')">查询</Button>
        <Button class="ivu-ml-8" @click="handleReset">重置</Button>

        </Col>
      </Row>
      <Table ref="table" :columns="columns" :data="dataList" :height="500" :loading="tableLoading" class="ivu-mt" @on-selection-change="changeChoose">
        <template slot-scope="{ row, index }" slot="action">
          <a @click="multiChooseOne(row, index)">选择</a>
        </template>
        <template slot-scope="{ row }" slot="inCommonUse">
          <Tag color="success" v-if="row.inCommonUse == 1">常用</Tag>
          <Tag color="default" v-else>不常用</Tag>
        </template>
      </Table>
      <Row class="ivu-mt ivu-text-left" style="marginTop:10px" justify="space-between">
        <Col span="12">
        <Page :total="total" :current.sync="pageNo" show-total show-sizer show-elevator :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" />
        </Col>
        <Col span="6" style="textAlign:right;">
        <Button type="text" @click="modalShow = false">取消</Button>
        <Button type="primary" @click="multiChooseAll">保存</Button>
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<script>
export default {
  mixins: [],
  data() {
    return {
      apis: "API_carList",
      dataList: [], // 车辆列表
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "常用车辆",
          key: "inCommonUse",
          slot: "inCommonUse",
          align: "center",
          width: 100
        },
        {
          title: "车牌号",
          key: "carNo",
          align: "center",
          width: 100
        },
        {
          title: "司机姓名",
          key: "driverName",
          align: "center",
          width: 100
        },
        {
          title: "司机身份证号",
          key: "driverCard",
          align: "center",
          width: 180
        },
        {
          title: "司机手机号",
          key: "driverPhone",
          align: "center",
          width: 130
        },
        {
          title: "押运员姓名",
          key: "supercargoName",
          align: "center",
          width: 110
        },
        {
          title: "押运员身份证号",
          key: "supercargoCard",
          align: "center",
          width: 180
        },
        {
          title: "押运员手机号",
          key: "supercargoPhone",
          align: "center",
          width: 130
        },
        {
          title: "操作",
          slot: "action",
          width: 120,
          align: "center",
          fixed: "right"
        }
      ],
      searchparams: {}, // 查询条件参数
      modalShow: false, // modal控制器
      modalloading: true,
      ChooseList: [], // 选择列表
      pageNo: 1, // 页码
      pageSize: 20, // 查询条数
      total: 0, // 总数
      tableLoading: false, // table加载loading
      isGetData: true, // 是否打开即拉取接口
      constSearchData: { customerId: this.$store.getters.store_userInfo.id }
    };
  },
  mounted() {},
  methods: {
    // 确认选择 => 不需要多选
    chooseRow(row, index) {
      this.$emit("changeValue", row);
      this.modalShow = false;
    },
    // 确认选择 => 多选中的单选
    multiChooseOne(row, index) {
      this.ChooseList = [row];
      this.$emit("changeValue", this.ChooseList);
      this.modalShow = false;
    },
    // 多选模式下监听选择数据 => @on-selection-change
    changeChoose(event) {
      this.ChooseList = event;
    },
    // 确认选择 => 多选中的多选
    multiChooseAll() {
      this.$emit("changeValue", this.ChooseList);
      this.modalShow = false;
    },
    // 弹窗打开
    openFun(data) {
      // type == 0 销售 type == 1 采购
      if (data)
        this.constSearchData = {
          ...this.constSearchData,
          ...data
        };
      this.modalShow = true;
      this.searchparams = {};
      this.ChooseList = [];
      if (this.isGetData) {
        this.getData();
      }
    },
    // 获取列表数据
    getData() {
      if (this.tableLoading) return;
      if (!this.apis) return;
      this.tableLoading = true;
      let page = {
        pageSize: this.pageSize, // 起始页
        pageNo: this.pageNo // 查询数量
      };
      let params = {
        ...this.constSearchData,
        ...this.searchparams,
        ...page
      };
      this.httpGet(this.API[this.apis], params)
        .then((res) => {
          if (res.success) {
            this.tableLoading = false;
            this.dataList = res.data.rows;
            this.total = res.data.totalRows;
          } else {
            this.tableLoading = false;
          }
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    //  个性化操作
    handleFun(data, titleCon = "叫号", ApiName) {
      if (this.tableLoading) return;
      if (!ApiName) return;
      this.$Modal.confirm({
        title: titleCon + "确认",
        content: "确认要" + titleCon + "?",
        loading: true,
        onOk: () => {
          this.apis[ApiName](data)
            .then((res) => {
              this.$Message.success(titleCon + "成功!");
              this.$Modal.remove();
              this.getData();
            })
            .catch((err) => {
              this.$Modal.remove();
            });
        }
      });
    },
    // 分页重置
    resetPage() {
      this.pageNo = 1;
      this.getData();
    },
    // 切换页码
    changePage(page) {
      this.pageNo = page;
      this.getData();
    },
    // 切换每页条数
    changePageSize(size) {
      this.pageNo = 1;
      this.pageSize = size;
      this.getData();
    },
    //筛选框查询
    handleSubmit(flag) {
      // if (!this.searchparams.carNo || flag == 'carNo' && this.searchparams.carNo.length < 3) {
      //   this.$Message.error('请输入三位及其以上车牌号！');
      //   return;
      // }
      this.pageNo = 1;
      this.getData();
    },
    //筛选框重置
    handleReset() {
      this.pageNo = 1;
      this.searchparams = {};
      this.getData();
    }
  }
};
</script>
<style lang="less" scoped>
::v-deep .ivu-modalShow-header {
  background-image: url("~@/assets/images/modal_back900.png") !important;
}
.selectcarpage {
  &-selectmodel {
    border: none;
  }
  .ivu-grid {
    width: 520px;
  }
}
</style>
